<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>修改密码</IHeader>
    </template>
    <view class="login-content whov">
      <view class="login-header flex flex-column items-center">
        <view class="login-logo">
          <image src="/static/images/logo.png" mode="widthFix" class="logo-img"></image>
        </view>
        <view class="login-title">修改密码</view>
        <view class="login-subtitle">云仓商户管理系统</view>
      </view>

      <!-- 输入框区域 -->
      <view class="form-area">
        <view class="form-group">
          <uni-easyinput class="input-field" v-model="form.password" type="password" :maxlength="8" placeholder="请输入旧密码" :clearable="false" input-align="center" :border="false" placeholder-style="color:#ccc" />
          <view class="input-bottom-line"></view>
        </view>
        <view class="form-group">
          <uni-easyinput class="input-field" v-model="form.passwordNew" type="password" :maxlength="8" placeholder="确认新密码" :clearable="false" input-align="center" :border="false" placeholder-style="color:#ccc" />
          <view class="input-bottom-line"></view>
        </view>
      </view>

      <!-- 操作按钮区域，实现同一行 -->
      <view class="operation-bar">
        <button class="login-btn" @click="loginFun" :disabled="isLoading">
          <template v-if="isLoading">
            <text class="loading-text">修改中...</text>
          </template>
          <template v-else>确认修改</template>
        </button>

        <view class="login-btn-cancel" @click="handlerToHome"> 暂不修改 </view>
      </view>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import { computed, ref } from 'vue'
  import useToastMsg from '@/hooks/sysMsg'
  import { getLoginRes, selectUserInfo, userLogin } from '@/api/login'
  import { resetUserPwd } from '@/api/zmanager/login'
  import useUserInfoStore from '@/store/userInfo'
  const userInfoStore = useUserInfoStore()
  const isLoading = ref(false)
  const navigatePage = useNavigatePage()
  const toastMsg = useToastMsg()
  const bankUrl = computed(() => (userInfoStore.getPlatformType == 'gld' ? '/pages/zmanager/index/index' : '/pages/invest/index/index'))
  const form = ref({
    passwordNew: '',
    password: '',
  })

  const loginFun = async (e: any) => {
    if (!form.value.password) {
      toastMsg.showToast('请输入旧密码')
      return
    }
    if (!form.value.passwordNew) {
      toastMsg.showToast('请输入新密码')
      return
    }
    if (isLoading.value) return // 防止重复提交
    isLoading.value = true
    const result = await resetUserPwd(userInfoStore.getUserInfo.userId, form.value.passwordNew, form.value.password)
    if (result) {
      toastMsg.showToast('密码修改成功')
      navigatePage.redirectTo(bankUrl.value)
    }
    isLoading.value = false
  }

  const handlerToHome = () => {
    navigatePage.redirectTo(bankUrl.value)
  }
</script>

<style lang="scss" scoped>
  .login-content {
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;

    // 顶部logo区域
    .login-header {
      padding-top: 80rpx;
      text-align: center;
      .login-logo {
        margin: 0 auto;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        background: linear-gradient(138deg, #f0f9f5 0%, #e6f7ef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 16rpx rgba(96, 213, 150, 0.15);

        .logo-img {
          width: 120rpx;
          height: 120rpx;
        }
      }

      .login-title {
        margin-top: 40rpx;
        font-size: 36rpx;
        color: #333;
        font-weight: 600;
        letter-spacing: 2rpx;
      }

      .login-subtitle {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #999;
        letter-spacing: 1rpx;
      }
    }

    // 表单区域
    .form-area {
      padding-top: 70rpx;

      .form-group {
        position: relative;
        margin-bottom: 40rpx;

        .input-field {
          font-size: 28rpx;
          color: #333;
          padding: 20rpx 0;
        }

        .input-bottom-line {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2rpx;
          background-color: #eee;
        }
      }
    }

    // 操作按钮行
    .operation-bar {
      display: flex;
      margin-top: 20rpx;
      display: flex;
      gap: 16rpx;
      padding-top: 16rpx;

      .login-btn {
        flex: 1;
        line-height: 80rpx;
        background-color: #3b82f6;
        color: white;
        border: none;
        border-radius: 15rpx;
        font-size: 28rpx;
        font-weight: 500;
        transition: all 0.3s;

        .loading-text {
          margin-left: 12rpx;
        }

        &:disabled {
          background-color: #ccc;
          color: #fff;
          opacity: 0.8;
        }
      }

      .login-btn-cancel {
        flex: 1;
        font-size: 26rpx;
        color: #626774;
        line-height: 80rpx;
        text-align: center;
        border-radius: 15rpx;
        transition: all 0.2s;
        border: 1px solid #eee;
        box-sizing: border-box;

        &:active {
          background: #f5f5f5;
        }
      }
    }
  }
</style>
